<template>
	<div class="pl">
		<MyHeader />
		<ul class="list">
			<li v-for="(item, index) in models" :key="index" @click="chooseItem(index)">
				<div :class="['first', key == index ? 'selected' : '']">
					<span></span>
				</div>
				<div class="second">
					<label>{{ item.model }}</label>
					<label class="myfont">{{ item.addr }}</label>
				</div>
			</li>
		</ul>
		<div class="confirm" @click="confirm">开始打分</div>
	</div>
</template>
<script lang="ts">
import { IState } from '@/types/app';
import Vue from 'vue';
import { mapState } from 'vuex';
import MyHeader from '../components/MyHeader.vue';
export default Vue.extend({
	name: 'ProdcutList',
	components: {
		MyHeader
	},
	data() {
		return {
			key: NaN as number
		};
	},
	computed: {
		...mapState({
			models: (state: any) => state.models
		})
	},
	methods: {
		chooseItem(index: number) {
			if (this.key !== index) {
				this.key = index;
			}
		},
		confirm() {
			this.$router.push({
				path: '/pg',
				query: {
					index: String(this.key)
				}
			});
		}
	}
});
</script>

<style lang="less" scoped>
.pl {
	width: 100%;
	height: 100vh;
	background-image: url('~@/static/images/bg.png');
	background-repeat: no-repeat;
	background-size: 100% 103%;
	background-color: #0f0f9a;
	overflow: hidden;
	display: flex;
	flex-direction: column;

	.list {
		overflow-y: auto;
		li {
			display: flex;
			align-items: center;
			padding: 0 44px;
			margin-bottom: 38px;
			&:last-child {
				margin-bottom: 0;
			}
			&:nth-child(2n) {
				.second:last-child {
					background-image: url('~@/static/images/bg1.png');
				}
			}
			&:nth-child(2n-1) {
				.second:last-child {
					background-image: url('~@/static/images/bg2.png');
				}
			}
			.first {
				width: 69px;
				height: 69px;
				display: flex;
				justify-content: center;
				align-items: center;
				span {
					width: 42px;
					height: 42px;
					border-radius: 50%;
					border: 1px solid #f8ee78;
				}
				&.selected {
					span {
						display: flex;
						justify-content: center;
						align-items: center;
						&::before {
							content: '';
							display: block;
							width: 21px;
							height: 15px;
							background: url('~@/static/images/right.png') center no-repeat;
							background-size: contain;
						}
					}
				}
			}
			.second {
				display: flex;
				align-items: center;
				width: 573px;
				height: 69px;
				line-height: 69px;
				padding: 0 20px;
				background-size: 573px 69px;
				background-repeat: no-repeat;
				background-position: 0 0;

				label {
					font-size: 25px;
					&:first-child {
						flex: 1;
						color: #f8c376;
					}
					&:last-child {
						flex: none;
						color: #fff;
					}
				}
			}
		}
	}

	.confirm {
		width: 249px;
		height: 79px;
		line-height: 79px;
		text-align: center;
		background: url('~@/static/images/btn.png') 0 0 no-repeat;
		background-size: 249px 79px;
		color: #24e5e5;
		margin-top: 82px;
		margin-bottom: 129px;
		align-self: center;
	}
}
</style>
